<template>
    <div>
        <el-form :model="pictureForm" @submit.native.prevent="onSubmit" :rules="rules" ref="pictureForm" label-width="120px" style="width:480px">
            <el-form-item label="图片场景ID:" prop="imageViewId">
                    <el-input v-model="pictureForm.imageViewId" :disabled="inputDis"></el-input>
            </el-form-item>
            <el-form-item label="图片场景名称:" prop="imageViewName">
                    <el-input v-model="pictureForm.imageViewName"></el-input>
            </el-form-item>
            <el-form-item label="图片类型:">
            	<el-checkbox-group v-model="checkedList">
					<el-checkbox border size="mini" style="margin-left:10px;" v-for="item in imageTypeList" :label="item.imageTypeKey" :key="item.imageTypeKey">{{item.imageTypeName}}</el-checkbox>
				</el-checkbox-group>
            </el-form-item>
            <el-form-item>
                <button type="submit" class="el-button el-button--primary">{{buttonName}}</button>
                <el-button @click="turnToList">返回列表</el-button>
                <el-button @click="openImgType()">新增图片类别</el-button>
            </el-form-item>
        </el-form>
        <el-dialog
		  title="新增图片类别"
		  :visible.sync="dialogVisible"
		  width="50%">
		    <el-form :model="pictureTypeForm" @submit.native.prevent="onSubmit" :rules="rules" ref="pictureTypeForm" label-width="120px" style="width:460px">
	            <el-form-item label="图片类型KEY:" prop="imageTypeKey">
	                    <el-input v-model="pictureTypeForm.imageTypeKey"></el-input>
	            </el-form-item>
	            <el-form-item label="图片类型名称:" prop="imageTypeName">
	                    <el-input v-model="pictureTypeForm.imageTypeName"></el-input>
	            </el-form-item>
	        </el-form>
		  <span slot="footer" class="dialog-footer">
		  	<el-button @click="dialogVisible = false">取 消</el-button>
   			<el-button type="primary" @click="addImgType">确 定</el-button>
		  </span>
		</el-dialog>
    </div>
</template>
<script>
export default {

    data() {
        return {
            buttonName: '',
            pictureForm:{},
            pictureTypeForm:{},
            inputDis:true,
            checkedList:[],
            imageTypeList:[],
            dialogVisible:false,
            cityOptions :['上海', '北京', '广州', '深圳'],
            res: {

            },
             rules: {
                imageViewId: [
                    { required: true, message: '请输入图片场景ID', trigger: 'blur' },
                ],
                imageViewName: [
                 { required: true, message: '请输入图片场景名称', trigger: 'blur' }
                ],
                imageTypeKey: [
                 { required: true, message: '请输入图片类型KEY', trigger: 'blur' }
                ],
                imageTypeName: [
                 { required: true, message: '请输入图片类型名称', trigger: 'blur' }
                ]
            }
        };
    },
    watch:{
        '$route'(){
            if (!this.$route.params.id){
                this.resetForm('pictureForm');
                this.inputDis = false;
                this.buttonName = '立即创建'
            }else{
                this.getData();
                this.buttonName = '立即更新'
                this.inputDis = true;
            }
        }
    },
    methods: {
        getData(){
            this.$axios.get(this.$api.getImageViewListById,{ params: {imageViewId: this.imageViewId}})
            .then((res) => {
            	this.pictureForm.imageViewId = res.data.result[0].imageViewId
            	this.pictureForm.imageViewName = res.data.result[0].imageViewName
            	this.checkedList = []
            	for (var i = 0; i < res.data.result.length; i++) {
            		this.checkedList.push(res.data.result[i].imageViewType.imageViewKey)
            	}
			})
        },
        turnToList(){
            this.$router.push('/picture/pictureList')
        },
        resetForm() {
            this.pictureForm = {};
            this.checkedList = [];
        },
        openImgType(){
        	this.dialogVisible = true
        },
        addImgType(){
        	this.$refs['pictureTypeForm'].validate((valid) => {
              if (valid) {
              	var requestParam = this.pictureTypeForm;
                this.$axios(this.$api.insertImageType,{params:requestParam}).then((res) => {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    if (res.data.code == 1){
                    	this.$axios.get(this.$api.getImageTypeList).then((res) => {
				            this.imageTypeList = res.data.result;
						});
                        this.dialogVisible = false;
                    }
                })
              }else{
                console.log('验证不通过');
              }
            })
        },
        onSubmit(event) {
        	this.pictureForm.imageViewTypeList = this.checkedList.join(',');
            var requestParam = this.pictureForm
            //新增合作意向
            if (!this.$route.params.id){
                this.$refs['pictureForm'].validate((valid) => {
                  if (valid) {
                  	console.log(requestParam);
                    this.$axios(this.$api.insertImageView,{params:requestParam}).then((res) => {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        if (res.data.code == 1){
                            this.$router.push('/picture/pictureList')
                        }
                    })
                  }else{
                    console.log('验证不通过');
                  }
                })
            }else{
                //修改合作意向
                this.$refs['pictureForm'].validate((valid) => {
                  if (valid) {
                  	console.log(requestParam);
                    this.$axios(this.$api.updateImageView,{params:requestParam}).then((res) => {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        if (res.data.code == 1){
                            this.$router.push('/picture/pictureList')
                        }
                    })
                  }else{
                    console.log('验证不通过');
                  }
                })
                
            }
          	
        }
    },
    activated() {
        this.imageViewId = this.$route.params.id;
        this.$axios.get(this.$api.getImageTypeList).then((res) => {
            this.imageTypeList = res.data.result;
		});
		this.pictureForm = {};
		this.checkedList = []
        if (this.imageViewId != null ){
            this.getData();
            this.buttonName = '立即更新'
            this.inputDis = true;
        }else{
            this.resetForm('pictureForm') ;
            this.buttonName = '立即创建'
            this.inputDis = false;
        }
    },
    deactivated() {

    }
}
</script>
